<template>
    <div class="hospital">
      <!-- 左侧导航区域 -->
      <div class="menu">
        <div class="top">
          <el-icon><HomeFilled /></el-icon>
          <span> / 会员中心</span>
        </div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true">
          <el-menu-item
            index="/user/certification"
            :route="{path:'/user/certification',query:{type:$route.query.type,id:$route.query.id}}"
          >
            <el-icon><icon-menu /></el-icon>
            <span>实名认证</span>
          </el-menu-item>
          <el-menu-item index="/user/order" :route="{path:'/user/order',query:{type:$route.query.type,id:$route.query.id}}">
            <el-icon><document /></el-icon>
            <span>挂号订单</span>
          </el-menu-item>
          <el-menu-item index="/user/patient" :route="{path:'/user/patient',query:{type:$route.query.type,id:$route.query.id}}">
            <el-icon><setting /></el-icon>
            <span>就诊人管理</span>
          </el-menu-item>
          <el-menu-item index="/user/profile" :route="{path:'/user/profile',query:{type:$route.query.type,id:$route.query.id}}">
            <el-icon><InfoFilled /></el-icon>
            <span>账号信息</span>
          </el-menu-item>
          <el-menu-item index="/user/feedback" :route="{path:'/user/feedback',query:{type:$route.query.type,id:$route.query.id}}">
            <el-icon><Search /></el-icon>
            <span>意见反馈</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧内容展示区域:路由组件展示位置 -->
      <div class="content">
        <!-- 子组件展示结构地方 -->
        <router-view></router-view>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  //左侧菜单需要用到的图标
  import {
    Document,
    Menu as IconMenu,
    Setting,
    InfoFilled,
    Search,
    HomeFilled,
  } from "@element-plus/icons-vue";
  //获取当前路由的信息
  let $route = useRoute()
  </script>
  
  <style scoped lang="scss">
  .hospital {
    display: flex;
    .menu {
      flex: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      .top {
        color: #7f7f7f;
      }
    }
    .content {
      flex: 8;
    }
  }
  </style>
  